<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="order by dede58.com" />
<title>TaoBook用户注册</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/login.css">
	<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/xiangqing.js" type="text/javascript" charset="utf-8">
		</script>
		
		<SCRIPT type="text/javascript">
			var flag=false ;
			
function checkPass(){
	var a=document.getElementById("UserPass");
	var b=document.getElementById("errPass");
	b.innerHTML="";
	var regx=/^\w{6,12}/;
	if(regx.test(a.value)==false){
		a.style.border="solid 1px red";
		b.innerHTML="<font color='#FF0000'>密码长度应在6到12位之间！</font>";
		return false;
	}return true;
}

function reCheckpass(){
	var repa=document.getElementById("UserPass");
	var pa=document.getElementById("reUserPass");
	var redi=document.getElementById("errRePass");
	redi.innerHTML="";
	if(repa.value!=pa.value){
		pa.style.border="solid 1px red";
		redi.innerHTML="<font color='#FF0000'>两次密码不一致！</font>";
		return false;
	}
	return true;	
}



function checkTel(){
	var a=document.getElementById("tel");
	var b=document.getElementById("errtel");
	b.innerHTML="";
	regx=/^\d{11}$/;
	if(regx.test(a.value)==false){
			a.style.border="solid 1px red";
		b.innerHTML="<font color='#FF0000'>电话号码应为于11位！</font>";
		return false;
	}return true;
}

		$(function(){
			$("#veryCode").blur(function(){
				$.ajax({
					type:"get",
					url:"checkName.do",
					async:true,
					data:{
						"yanzhenma":$("#veryCode").val()
					},
					success:function(results){
						//alert(results+"1");
						if($.isEmptyObject(results)){
							$("#info").html("<font color='red'>验证码错误</font>");
							flag =false;
						}else{
							$("#info").html("<font color='blue'></font>");
							flag =true;
						}
					}
				});
			});
		});
		function callback(data){     
		    $("#info").html(data);     
		} 
		function refresh(){
			window.location.reload(true);
		}
		
			//验证码登录判断
		function returnResults(){
			 if(flag==false){
			 	return false;
			 }else{
			 	return true;
			 }
		}
		
		</SCRIPT>
		
</head>
<body>

	<form method="post"
		action="${pageContext.request.contextPath}/User/register.do" method="post" onsubmit="return checkPass()&&reCheckpass()&&checkTel()&&returnResults()&&returnFlag()">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">会员注册</div>
					<div class="right fr">
						<a href="${pageContext.request.contextPath}/User/toHome.do"
							target="_self">TAOBOOK商城</a>
					</div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="regist_main center">
					<div class="username">
						用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;
						<input id="un" class="shurukuang" type="text" name="userName" placeholder="请输入你的用户名"/>
						<div  style="display: inline;" id="msg"></div> 
					</div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;
						<input id="UserPass" class="shurukuang" type="password" name="userPass" placeholder="请输入你的密码" onblur="checkPass()"/>
						<div style="display: inline;" id="errPass"></div>
					</div>
					
					<div class="username">确认密码:&nbsp;&nbsp;
						<input id="reUserPass" class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码" onblur="reCheckpass()"/>
						<div style="display: inline;" id="errRePass"></div></td>
					</div>
					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input id="tel" class="shurukuang" type="text" name="userPhone" placeholder="请填写正确的手机号" onblur="checkTel()"/>
						<div style="display: inline;" id="errtel"></div>
					</div>
					<div class="username">
						<div class="left fl">
							验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma"
								type="text" name="username" id="veryCode" placeholder="请输入验证码"/>
						</div>
						<div class="right fl">
							 <img id="imgObj"  alt="" src="${pageContext.request.contextPath}/ImageRand"/>
							 <a href="javascript:refresh()">换一张</a>       
        						<div style="display: inline;" id="info"></div>
						</div>
						<!--验证码 -->
						<div class="clear"></div>
					</div>
				</div>
				<div class="regist_submit">
					<input class="submit" type="submit" name="submit" value="立即注册">
				</div>

			</div>
		</div>
	</form>
</body>
</html>